<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#center{
			width: 400px;
			height: 300px;
			border: 2px solid rgb(255,102,0);
		}
		#center div:nth-child(1){
			width:calc(100% - 20px) ;
			height: 50px;
			line-height: 50px;
			border-bottom:2px solid rgb(255,102,0);
			color: rgb(254,121,30);
			font-size: 25px;
			font-weight: bold;
			padding-left: 20px;
		}
		#center div:nth-child(2){
			width: 100%;
			padding-left: 80px;
		}
		#center div input{
			
		}
		.input{
			width: 208px;
			height: 29px;
			border: none;
			background: url(image/input.png) no-repeat -0px -0px;
		}
		.input1{
			width: 208px;
			height: 29px;
			border: none;
			background: url(image/input.png) no-repeat -0px -31px;
		}
		#center div button{
			width: 130px;
			height: 40px;
			border: none;
			border-radius: 5px;
			background-color: rgb(255,102,0);
			color: white;
			font-size: 20px;
		}
	</style>
	<script>
		// 179001012蒲磊
		window.onload=()=>{
			// 获取input
			let inputs=document.querySelectorAll('#center div p input')
			console.log(inputs)
			for(let i=0;i<inputs.length;i++){
				inputs[i].addEventListener('focus',()=>{
					inputs[i].className="input1"
				})
				inputs[i].addEventListener('blur',()=>{
					inputs[i].className="input"
				})
			}
		}
	</script>
	<body>
		<div id="center">
			<div>用户登录</div>
			<div>
				<p><label for="">用户名：</label><input type="text" class="input"></p>
				<p><label for="">　密码：</label><input type="text" class="input"></p>
				<p><label for="">　　　　</label><button type="button">登录</button></p>
				
			</div>
		</div>
	</body>
</html>
